<template>
  <div class="wrapper">
		<div class="content" :style="{ transform: 'rotateY(' + r + ')' }">
			<LoginForm v-model:r="r" class="login-form" />
			<Pwd v-model:r="r" class="login-pwd" />
		</div>
  </div>
</template>

<script setup>
import LoginForm from './loginform'
import Pwd from './password'
import { ref } from 'vue'
const r = ref('0deg')
</script>

<style scoped lang="scss">
.wrapper {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to bottom right, #ffffff, #404040);
	display: flex;
	perspective: 1000px;
	.content {
		width: 500px;
		height: 340px;
		background-color: #ffffff;
		margin: auto;
		border-radius: 10px;
		position: relative;
		transform-style: preserve-3d;
		transition: 1s;
		>div {
			background-color: #ffffff;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.login-form {
			transform: translateZ(1px);
		}
		.login-pwd {
			transform: rotateY(180deg) translateZ(1px);
		}
	}
}
</style>